<template>
	<!-- 顶部组件 -->
	<u-navbar :isFixed="isFixed" ref="nav" :background="{backgroundColor:isDarkStyle.navBg}" :is-back="isBack"
		:back-icon-color="isDarkStyle.backIconColor" :border-bottom="false" :back-text="title" :custom-back="customBack"
		:title="name" :title-color="isDarkStyle.txtColor" title-width="400" :back-icon-name="iconName" :back-icon-size="iconSize">
		<slot></slot>
	</u-navbar>
</template>

<script>
	export default {
		computed: {
			isDark() {
				return this.currentTheme === "dark"
			},
			isDarkStyle() {
				return this.isDark ? {
					navBg: this.navBg || '#1C1826',
					txtColor: this.txtColor || '#ECECEC',
					backIconColor: this.txtColor || this.currentThemeObj.primary
				} : {
					navBg: this.navBg || 'white',
					txtColor: this.txtColor || '#1A1A1A',
					backIconColor: this.txtColor || "#1A1A1A"
				}
			}
		},
		props: {
			// 返回按钮的title
			title: {
				default: '',
				type: String
			},
			// 页面的name
			name: {
				default: '',
				type: String
			},
			// 是否显示返回按钮
			isBack: {
				type: Boolean,
				default: true
			},
			// 是否自定义返回
			isCustomBack: {
				type: Boolean,
				default: false
			},
			// 组件背景色
			navBg: {
				type: String,
				default: ''
			},
			//文字颜色
			txtColor: {
				type: String,
				default: ''
			},
			isFixed: {
				type: Boolean,
				default: true
			},
      // 返回图标
      iconName: {
        type: String,
				default: 'nav-back'
      },
      iconSize: {
        type: String,
      }
		},
		data() {
			return {
				backTextStyleObj: {
					width: "50vw",
					'whiteSpace': 'nowrap',
					'overflow': 'hidden',
					'textOverflow': 'ellipsis',
					"display": 'block',
					fontWeight: "bold"
				},
			};
		},
		methods: {
			//自定义返回
			customBack() {
				if (this.isCustomBack) {
					this.$emit('customBack')
					return false
				}
				// if([1007,1008].includes(this.scene)){
				// 	//单聊或群聊分享进入
				// 	this.$store.dispatch('scene',null)
				// 	this.$u.route({
				// 		type:"reLaunch",
				// 		url:"/pages/index/index"
				// 	})
				// 	return false;
				// }
				this.$u.route({
					type: "back"
				})
			},
		},
		mounted() {
			this.$nextTick(() => {
				const ref = this.$refs.nav;
				if (ref) {
					this.$emit('getNavHeight', {
						navbarHeight: ref.navbarHeight,
						statusBarHeight: ref.statusBarHeight
					})
				}
			})
		}
	}
</script>

<style lang="scss">

</style>
